import React, { Fragment } from 'react'
import { Layout } from 'antd'
import { useRecoilState } from 'recoil';
import { designerState } from '../../store'
import ComponentSetting from '../../designer/component/setting'

const { Sider } = Layout

interface IProps {
  children?: any
}

/**
 * 右侧设置页面
 */
const MyRightSide = (props: IProps) => {
  const [isSetting, setIsSetting] = useRecoilState(designerState.isSettingAtom)
  // const [selectedNode, setSelectedNode] = useRecoilState(designerState.selectedNodeAtom);

  const toggleSlider = () => {
    setIsSetting(!isSetting);
  }

  return (
    <Fragment>
      <Sider 
        width={280} 
        theme="light" 
        collapsible 
        defaultCollapsed 
        reverseArrow={true}
        collapsed={ isSetting } 
        onCollapse={ toggleSlider } 
        collapsedWidth="0"
      >
        <ComponentSetting />
      </Sider>
    </Fragment>
  )
}

export default MyRightSide